<!DOCTYPE html>
<!-- 首页 - 已优化:
1. 调整了轮播图指示器为inside样式，与系统公告页面保持一致
2. 整体布局采用青绿色主题色(#3a7e6f)
3. 最大宽度调整为1280px，减少了两侧空白
4. 应用了更现代的卡片式设计和阴影效果
-->
<html>
<head lang="en">
<meta charset="utf-8">
<title>首页</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="order by mobanxiu.cn" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../../css/swiper.min.css">
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<script src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
	html::after {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		content: '';
		display: block;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-color: #f2f7f6;
	}

	body {
		font-family: 'Microsoft YaHei', Arial, sans-serif;
		color: #333;
	}

	.page-container {
		width: 100%;
		max-width: 1280px; 
		margin: 0 auto;
		padding: 0 10px;
		box-sizing: border-box;
	}

	/* 轮播图样式 */
	#test1 {
		overflow: hidden;
		border-radius: 6px;
		margin: 20px auto 30px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.08);
		height: 350px;
		max-width: 100%;
	}

	.layui-carousel {
		height: 350px !important;
		max-width: 100%;
	}

	.layui-carousel img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#test1 .layui-carousel-ind {
		position: absolute;
		bottom: 20px;
		text-align: center;
		width: 100%;
	}

	#test1 .layui-carousel-ind li {
		width: 30px;
		height: 6px;
		border-width: 0;
		border-style: solid;
		border-color: transparent;
		border-radius: 3px;
		background-color: rgba(255, 255, 255, 0.6);
		margin: 0 4px;
	}

	#test1 .layui-carousel-ind li.layui-this {
		width: 50px;
		height: 6px;
		border-width: 0;
		border-style: solid;
		border-color: transparent;
		border-radius: 3px;
		background-color: #3a7e6f;
	}

	/* 内容区域 */
	.content-section {
		margin-bottom: 30px;
	}

	/* 标题样式 */
	.title-container {
		text-align: center;
		margin-bottom: 25px;
		position: relative;
	}

	.title-container h2 {
		color: #3a7e6f;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.title-container p {
		color: #666;
		font-size: 14px;
		margin-top: 5px;
	}

	.title-container::after {
		content: '';
		width: 60px;
		height: 3px;
		background: #3a7e6f;
		position: absolute;
		bottom: -12px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 2px;
	}

	/* 特色功能区样式 */
	.features {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 -10px 30px;
	}

	.feature-item {
		width: calc(25% - 20px);
		margin: 0 10px 20px;
		background: #fff;
		border-radius: 6px;
		overflow: hidden;
		box-shadow: 0 3px 10px rgba(0,0,0,0.05);
		transition: all 0.3s ease;
	}

	.feature-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 15px rgba(0,0,0,0.08);
	}

	.feature-icon {
		height: 90px;
		background: linear-gradient(135deg, #3a7e6f, #4e9a8b);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 36px;
	}

	.feature-content {
		padding: 20px;
		text-align: center;
	}

	.feature-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
	}

	.feature-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}

	/* 新闻区域样式 */
	.new-list-5 {
		background-color: #fff;
		border-radius: 6px;
		padding: 20px;
		box-shadow: 0 3px 10px rgba(0,0,0,0.05);
		margin-bottom: 20px;
		max-width: 100%;
	}

	/* 主要文章展示样式 */
	.new5-one {
		display: flex;
		background-color: #fff;
		border-radius: 6px;
		overflow: hidden;
		box-shadow: 0 3px 10px rgba(0,0,0,0.05);
		margin-bottom: 20px;
		border: none;
		cursor: pointer;
	}

	.new5-one:hover {
		box-shadow: 0 6px 15px rgba(0,0,0,0.08);
	}

	.new5-one img {
		width: 40%;
		height: 240px;
		object-fit: cover;
	}

	.new5-one-info {
		width: 60%;
		padding: 20px;
		box-sizing: border-box;
	}

	.new5-one-info-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
		line-height: 1.4;
	}

	.new5-one-info-descript {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 20px;
	}

	.new5-one-info-time {
		font-size: 12px;
		color: #999;
	}

	/* 底部文章卡片样式 */
	.new5-body {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.new5-item {
		width: calc(33.33% - 15px);
		margin-bottom: 20px;
		background: #fff;
		border-radius: 6px;
		overflow: hidden;
		box-shadow: 0 3px 10px rgba(0,0,0,0.05);
		cursor: pointer;
		height: 320px;
		position: relative;
	}

	.new5-item:hover {
		box-shadow: 0 6px 15px rgba(0,0,0,0.08);
		transform: translateY(-5px);
	}

	.new5-item img {
		width: 100%;
		height: 160px;
		object-fit: cover;
	}

	.new5-item-title {
		padding: 15px 15px 10px;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin: 0;
		line-height: 1.4;
	}

	.new5-item-descript {
		padding: 0 15px;
		font-size: 13px;
		color: #666;
		line-height: 1.6;
	}

	.new5-item-time {
		padding: 10px 15px;
		color: #999;
		font-size: 12px;
		position: absolute;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}

	/* 查看更多按钮 */
	.view-more {
		text-align: center;
		margin: 10px 0 30px 0;
		position: relative;
		z-index: 1;
	}

	.view-more-btn {
		background: #3a7e6f;
		color: #fff;
		border: none;
		padding: 10px 25px;
		font-size: 14px;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.3s;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		display: inline-block;
		width: auto;
	}

	.view-more-btn:hover {
		background: #2d6557;
		box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	}
	
	.view-more-btn i {
		margin-left: 5px;
	}

	/* 媒体查询适配移动设备 */
	@media screen and (max-width: 992px) {
		.feature-item {
			width: calc(50% - 20px);
		}
	}

	@media screen and (max-width: 768px) {
		.new5-one {
			flex-direction: column;
		}
		
		.new5-one img {
			width: 100%;
			height: 180px;
		}
		
		.new5-one-info {
			width: 100%;
		}
		
		.new5-item {
			width: 100%;
			margin-bottom: 20px;
		}
		
		.feature-item {
			width: 100%;
			margin-bottom: 20px;
		}
	}
</style>
<body>
  <div id="app">
    <div class="page-container">
		<div class="layui-carousel" id="test1">
		  <div carousel-item>
			<div v-for="(item,index) in swiperList" :key="index">
				<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
			</div>
		  </div>
		</div>

		<!-- 系统标题和简介 -->
		<div class="content-section">
			<div class="title-container">
			  <h2>实习管理系统</h2>
			  <p>为学生和企业提供全方位实习管理服务</p>
			</div>
			
			<!-- 特色功能模块 -->
			<div class="features">
			  <div class="feature-item">
				<div class="feature-icon">
				  <i class="fas fa-graduation-cap"></i>
				</div>
				<div class="feature-content">
				  <div class="feature-title">学生管理</div>
				  <div class="feature-desc">全面管理学生信息、简历和申请，帮助学生找到合适的实习机会</div>
				</div>
			  </div>
			  
			  <div class="feature-item">
				<div class="feature-icon">
				  <i class="fas fa-building"></i>
				</div>
				<div class="feature-content">
				  <div class="feature-title">企业对接</div>
				  <div class="feature-desc">连接优质企业资源，提供实习岗位信息，促进校企合作</div>
				</div>
			  </div>
			  
			  <div class="feature-item">
				<div class="feature-icon">
				  <i class="fas fa-clipboard-check"></i>
				</div>
				<div class="feature-content">
				  <div class="feature-title">实习评估</div>
				  <div class="feature-desc">实习过程监督和评估，确保实习质量和学生成长</div>
				</div>
			  </div>
			  
			  <div class="feature-item">
				<div class="feature-icon">
				  <i class="fas fa-chart-bar"></i>
				</div>
				<div class="feature-content">
				  <div class="feature-title">数据分析</div>
				  <div class="feature-desc">全面的数据统计和分析，帮助改进实习管理流程</div>
				</div>
			  </div>
			</div>
		</div>

		<!-- 系统公告 -->
		<div class="content-section">
			<div class="title-container">
			  <h2>系统公告</h2>
			  <p>最新通知与实习动态</p>
			</div>
			
			<div v-if="newsList.length" class="new-list-5">
			  <!-- 主文章 -->
			  <div @click="jump('../news/detail.html?id='+newsList[0].id)" v-if="newsList.length>0" class="new5-one">
				<img :src="baseurl+newsList[0].picture" alt="">
				
				<div class="new5-one-info">
				  <div class="new5-one-info-title">{{newsList[0].title}}</div>
				  <div class="new5-one-info-descript line3">{{newsList[0].introduction}}</div>
				  <div class="new5-one-info-time">{{newsList[0].addtime}}</div>
				</div>
			  </div>
			  
			  <!-- 底部文章 - 左右对称布局 -->
			  <div class="new5-body">
				<!-- 文章1 -->
				<div @click="jump('../news/detail.html?id='+newsList[1].id)" v-if="newsList.length>1" class="new5-item">
				  <img :src="baseurl+newsList[1].picture" alt="">
				  <div class="new5-item-title line2">{{newsList[1].title}}</div>
				  <div class="new5-item-descript line3">{{newsList[1].introduction}}</div>
				  <div class="new5-item-time">{{newsList[1].addtime}}</div>
				</div>
				
				<!-- 文章2 -->
				<div @click="jump('../news/detail.html?id='+newsList[2].id)" v-if="newsList.length>2" class="new5-item">
				  <img :src="baseurl+newsList[2].picture" alt="">
				  <div class="new5-item-title line2">{{newsList[2].title}}</div>
				  <div class="new5-item-descript line3">{{newsList[2].introduction}}</div>
				  <div class="new5-item-time">{{newsList[2].addtime}}</div>
				</div>
				
				<!-- 文章3 -->
				<div @click="jump('../news/detail.html?id='+newsList[3].id)" v-if="newsList.length>3" class="new5-item">
				  <img :src="baseurl+newsList[3].picture" alt="">
				  <div class="new5-item-title line2">{{newsList[3].title}}</div>
				  <div class="new5-item-descript line3">{{newsList[3].introduction}}</div>
				  <div class="new5-item-time">{{newsList[3].addtime}}</div>
				</div>
			  </div>
			</div>
			
			<!-- 查看更多按钮 -->
			<div class="view-more">
			  <button @click="jump('../news/list.html')" class="view-more-btn">
				查看更多<i class="fas fa-arrow-right"></i>
			  </button>
			</div>
		</div>
    </div>
    <!-- 底部空白区域，确保查看更多按钮完全显示 -->
    <div style="height: 30px; width: 100%;"></div>
  </div>

  <script src="../../layui/layui.js"></script>
  <script src="../../js/swiper.min.js"></script>
  <script src="../../js/vue.js"></script>
  <script src="../../js/config.js"></script>
  <script src="../../modules/config.js"></script>
  <script src="../../js/utils.js"></script>
  <script type="text/javascript">
    var vue = new Vue({
      el: '#app',
      data: {
        swiperList: [],
        newsList: [],
        baseurl: ''
      },
      filters: {
        newsDesc: function(val) {
          if (val) {
            val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
            if (val.length > 60) {
              val = val.substring(0, 60);
            }
            return val;
          }
          return '';
        }
      },
      methods: {
        jump(url) {
          jump(url)
        },
      }
    });

    layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery'], function() {
		var layer = layui.layer;
		var element = layui.element;
		var form = layui.form;
		var carousel = layui.carousel;
		var http = layui.http;
		var jquery = layui.jquery;
		
		vue.baseurl = http.baseurl;
		
      // 获取轮播图 数据
      http.request('config/list', 'get', {
        page: 1,
        limit: 5
      }, function(res) {
        if (res.data.list.length > 0) {
          let swiperList = [];
          res.data.list.forEach(element => {
            if (element.value != null) {
              swiperList.push({
                img: http.baseurl + element.value
              });
            }
          });

		  vue.swiperList = swiperList;

		  vue.$nextTick(() => {
		    carousel.render({
		    	elem: '#test1',
				width: '100%',
		    	height: '350px',
		    	arrow: 'hover',
		    	anim: 'default',
		    	autoplay: 'true',
		    	interval: '3000',
		    	indicator: 'inside'
		    });
		  });
        }
      });

      // 系统公告
      http.request('news/list', 'get', {
        page: 1,
        order: 'desc'
      }, function(res) {
        vue.newsList = res.data.list;
      });
    });

    // 适配移动设备
    window.addEventListener('resize', function() {
      changeFrameHeight();
    });

    function changeFrameHeight() {
      if (window.parent && window.parent.changeFrameHeight) {
        window.parent.changeFrameHeight();
      }
    }
  </script>
</body>
</html>
